<template>
    <div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in dataSource">
                    <img :src="item" alt="" width="100%" height="100%">
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</template>
<script>
    require('../assets/swiper-3.4.0.min.css')
    import Swiper from '../assets/swiper-3.4.0.min'

    export default {
        props: {
            dataSource: {
                required: true,
                type: Array
            }
        },
        mounted(){
             new Swiper('.swiper-container', {
                 loop: true,
                 pagination: '.swiper-pagination',
                 nextButton: '.swiper-button-next',
                 prevButton: '.swiper-button-prev',
           })  
        }
    }
</script>
<style>

</style>